<template>
  <div>
    <div class="left-center-c">
      <table>
        <thead style="
                      box-shadow: 1px 3px 1px #ccc;
                      background-image: linear-gradient(#fff, #d3d3d3);
                    ">
          <tr class="tr-1">
            <th class="th-1">&nbsp;</th>
            <th class="th-2">歌曲标题</th>
            <th class="th-3">时长</th>
            <th class="th-4">歌手</th>
            <th class="th-5">专辑</th>
          </tr>
        </thead>
        <tbody class="tbody-1">
          <tr class="tr-2" v-for="({al,ar,name,dt},index) in data" :key="index">
            <td class="td-1">
              <span>{{index+1}}</span>

              <span class="el-icon-video-play"></span>
            </td>
            <td class="td-2">{{name}}</td>
            <td class="td-3">{{moment(dt).format("mm:ss") }}</td>
            <td class="td-4">{{ar[0].name}}</td>
            <td class="td-5">{{al.name}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    
  </div>
</template>

<script>
import moment from "moment";
export default {
  props:['id'],
  data() {
    return {
      data: null,
      moment:moment
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    getData(){
      const url = `/artists?id=${this.id}`
      this.axios.get(url).then(res=>{
        this.data = res.data.hotSongs.slice(0,10);
        console.log(this.data)
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.left-center-c {
  width: 100%;
  height: 100%;
}
.left-center-c > table {
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
  text-align: left;
  font-weight: normal;
  background-color: #f7f7f7;
}
.left-center-c > table > thead {
  display: table-header-group;
  vertical-align: middle;
  color: #666;
}
.left-center-c > table > thead > tr {

  display: table-row;
  height: 38px;
}
.left-center-c > table > thead > tr > th {
  padding: 8px 10px;
}
.tr-1 > .th-1 {
  width: 74px;
}
.tr-1 > .th-2 {
  width: 235px;
}
.tr-1 > .th-3 {
  width: 111px;
}
.tr-1 > .th-4 {
  width: 15%;
}
.tr-1 > .th-5 {
  width: 21%;
}

.tbody-1 {
  display: table-row-group;
  vertical-align: middle;
  width: 100%;
}
.tbody-1 > tr {
  white-space: nowrap;
  height: 30px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  height: 30px;
}
.tbody-1 > tr > td {
  padding: 15px 20px;
}
.tbody-1 > .tr-2 > .td-1 {
  width: 100px;
}
.td-1 > .el-icon-video-play {
  margin-left: 50px;
}
.td-1 > span {
  display: inline-block;
  width: 15px;
}
</style>
